@import "variables.scss";
//******布局样式******/

// flex row
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.row-center{
  @extend .row;
  justify-content: center;
}
.row-between {
  @extend .row;
  justify-content: space-between;
}
.row-around {
  @extend .row;
  justify-content: space-around;
}
.row-start {
  @extend .row;
  justify-content: flex-start;
}
.row-end {
  @extend .row;
  justify-content: flex-end;
}
.row-even {
  @extend .row;
  justify-content: space-evenly;
}

// flex column
.column {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.column-center{
  @extend .column;
  align-items: center;
}
.column-around{
  @extend .column;
  align-items: center;
  justify-content: space-around;
}
.column-between{
  @extend .column;
  align-items: center;
  justify-content: space-between;
}
.column-end{
  @extend .column;
  align-items: center;
  justify-content: end;
}
.container{
  @extend  .column;
}
.fixed-bottom{
  position: fixed;
  bottom: 0;
}

.fl { float: left; }
.fr { float: right; }
.tar { text-align: right; }
.tac { text-align: center; }
.tal { text-align: left; }


.bold { font-weight: 700; }

//*******布局*********
.pdr10 { padding-right: 10px !important; }
.mgb15 { margin-bottom: 15px !important; }

.pd10 { padding: 10px !important; }
.pr10 { padding-right: 10px !important; }
.pl10 { padding-left: 10px !important; }
.pt10 { padding-top: 10px !important; }
.pb10 { padding-bottom: 10px !important; }

.pd20 { padding: 20px !important; }
.pr20 { padding-right: 20px !important; }
.pl20 { padding-left: 20px !important; }
.pt20 { padding-top: 20px !important; }
.pb20 { padding-bottom: 20px !important; }

.pt40 { padding-top: 40px !important; }
.pb40 { padding-bottom: 40px !important; }

.h100 { height: 100% !important; }

.mg10 { margin: 10px !important; }
.mt10 { margin-top: 10px !important; }
.mb10 { margin-bottom: 10px !important; }
.ml10 { margin-left: 10px !important; }
.mr10 { margin-right: 10px !important; }

.mg20 { margin: 20px !important; }
.mt20 { margin-top: 20px !important; }
.ml20 { margin-left: 20px !important; }
.mr20 { margin-right: 20px !important; }
.mb20 { margin-bottom: 20px !important; }

.mg30 { margin: 30px !important; }
.mt30 { margin-top: 30px !important; }
.ml30 { margin-left: 30px !important; }
.mr30 { margin-right: 30px !important; }
.mb30 { margin-bottom: 30px !important; }




// 字体样式
.sm {
  font-size: 10px !important;;
}
.nm {
  font-size: 12px !important;;
}
.lg {
  font-size: 16px !important;;
}
.xl {
  font-size: 20px !important;;
}
.xxl {
  font-size: 32px !important;;
}
.xxxl {
  font-size: 42px !important;;
}
.xxxxl {
  font-size: 62px !important;;
}
.white {
 color: #fff !important;;
}
.orange {
  color: #1363DF !important;;
}
.blue {
  color: #0D2E95;
}
.muted {
  color: #9E9E9E;
}
.red {
  color: #E54A00;
}
.green {
  color: green;
}
.bold {
  font-weight: 500;
}
.tar {
  text-align: right;
}
.tal {
  text-align: left;
}

